<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/server.css">
</head>

<body>
    <div class="container">
        <!-- 顶部导航栏 -->
        <header>
            <div id="header">
                <a href="javascript:history.go(-1)"></a>
                <h1>客服</h1>
                <a href=""></a>
            </div>
        </header>
        <!-- 内容 -->
        <div class="middle">
            <h1>昨天15:24</h1>
            <div class="middle_one">
                <p></p>
                <p>
                    <span>弘猫客服</span>
                    <span>亲爱的“小阿喵”，您好，我是掌柜为您配备的专属客服，宝贝到货后我会通知您哦~</span>
                </p>
            </div>
            <h2>今天09:50</h2>
            <div class="middle_two">
                <p>
                    <span>小阿喵</span>
                    <span>你好，请问我买的东西什么时候发货呢?</span>
                </p>
                <p></p>
            </div>
        </div>
        <!-- 底部导航栏 -->
        <footer>
            <div id="footer_one"  style="display: none;">
                <p></p>
                <input type="text">
                <p>发&nbsp; 送</p>
            </div>
            <!-- 二 -->
            <div id="footer_two" style="display: none;">
                <p></p>
                <input type="text">
                <p></p>
            </div>
            <!-- 三 -->
            <div id="footer_three" >
                <div id="footer_three_one">
                    <p></p>
                    <input type="text" id="oinput">
                    <p id=op></p>
                </div>
                <div id="footer_three_two"  style="display: none;">
                    <p></p>
                    <p></p>
                    <p></p>
                </div>
            </div>


        </footer>



    </div>
    <script>
    function Body(){
         var oinput=document.getElementById('oinput');
         var op=document.getElementById('op');
         var f_two=document.getElementById('footer_three_two');
         var footer_three=document.getElementById('footer_three');
         var i=true
         oinput.onfocus=function(){
                oinput.style.width="23.125rem" ;
                op.style.backgroundImage="none"; 
                op.innerText="发送";
                op.style.width="10rem"
                op.style.backgroundColor="#FF9326";
                op.className="text_p";
                
                /*  op.style.backgroundColor="#FF9326";
                 op.style.width="10rem";
                 op.style.margin="1.25rem 0  0 2.1875rem";
                 op.style.borderRadius=".3125rem" */
                 console.log(op);

        }
         op.onclick=function(){
             if(i){
                op.innerText=""
                op.style.width="3.5rem"
                op.style.backgroundColor="";
                oinput.style.width="30rem" ;
                footer_three.style.height="16.25rem";
                f_two.style.display="flex"
                op.style.backgroundImage="url(./images/server_fooder3.png)"
                op.style.backgroundPosition="50% 50%";
                op.style.backgroundSize="3.25rem 3.25rem";
                 i=false
             }else{
                op.innerText=""
                op.style.width="3.5rem"
                op.style.backgroundColor="";
                oinput.style.width="30rem" ;
                footer_three.style.height="6.25rem";
                f_two.style.display="none"
                op.style.backgroundImage="url(./images/server_fooder2.png)"
                op.style.backgroundPosition="50% 50%";
                op.style.backgroundSize="3.25rem 3.25rem";
                i=true
             }

            

         }
    }
    Body()



    </script>





    <script src="./js/rem.js"></script>
</body>

</html>